<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/mstyle.css" />
		<style type="text/css">
			.mui-content{padding:0}
		</style>
	</head>
	<body class="marketPage optionalPage marketUsPage">
		<!--navBar-->
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">行情</h1>
		</header>
		<div class="stockTab mui-content mui-clearfix">
			<p class="stockHk stockActive " data-type='hk'><span>港股</span></p>
			<p class="stockGd" data-type='gd'><span>商品</span></p>
			<p class="stockUs " data-type='us'><span>美股</span></p>
		</div>
		<!--container of stock-->
		<div class="stockUsCont">
			<div class="stockNum mui-content">
				<div class="mui-row" id="contZS"></div>
				<script type="text/template" id="tempZS">
					{%for(var i=0;i< data.length ; i++){%}
						{% if(data[i].changeRate > 0){%}
					<div class="mui-col-sm-4 mui-col-xs-4 highRed">
						{%}else{%}
					<div class="mui-col-sm-4 mui-col-xs-4 lowGreen">
						{%}%}
						<li class="mui-table-view-cell">
							<h3>{%=data[i].name%}</h3>
							<p class="num">{%=data[i].closePrice%}</p>
							<p class="mui-clearfix">
								<span>{%=data[i].change%}</span>
								<span>{%=data[i].changeRate%}%</span>
							</p>
						</li>
					</div>
					{%}%}
				</script>
			</div>
			<div class="contTitle mui-content">
				<div class="mui-row">
					<div class="mui-col-sm-6 mui-col-xs-6">
						<li class="mui-table-view-cell">名称</li>
					</div>
					<div class="mui-col-sm-3 mui-col-xs-3">
						<li class="mui-table-view-cell price">价格</li>
					</div>
					<div class="mui-col-sm-3 mui-col-xs-3">
						<li class="mui-table-view-cell percent">涨跌幅</li>
					</div>
				</div>
			</div>
			<div class="mui-scroll-wrapper" style="top: 5.2rem;bottom:50px;">
				<div class="mui-scroll">
					<div class="contInner ">
						<div class=" mui-content" data-id='1' id="cont"></div>
						<script type="text/template" id="temp">
							{%for(var i=0;i < data.length;i++){%}
							<div class="mui-row" data-code='{%=data[i].code%}'>
								<div class="mui-col-sm-6 mui-col-xs-6">
									<li class="mui-table-view-cell mui-double mui-clearfix">
										{%if(data[i].stockType=='hk'){%}
										<img src="images/HK_20x15_@3x.png" alt="" class="nameIcon" />
										{%}else if(data[i].stockType=='us'){%}
										<img src="images/US_40_29.png" alt="" class="nameIcon" />
										{%}else if(data[i].code=='GC1802'||data[i].code=='GC1712'){%}
										<img src="images/GC_20x15_@3x.png" alt="" class="nameIcon" />
										{%}else if(data[i].code=='CL1801'||data[i].code=='CL1802'){%}
										<img src="images/CL_20x14_@3x.png" alt="" class="nameIcon" />
										{%}else if(data[i].code=='SI1803'||data[i].code=='SI1712'){%}
										<img src="images/SI_20x14_@3x.png" alt="" class="nameIcon" />
										{%}%}
										<p class="nameInfo">
											{% if(data[i].code=='GC1802'||data[i].code=='CL1801'||data[i].code=='SI1803'){%}
											<span class="name" style="color: #ff4746;">{%=data[i].name%}</span><span>{%=data[i].code%}</span>
											{%}else{%}
											<span class="name">{%=data[i].name%}</span><span>{%=data[i].code%}</span>
											{%}%}
										</p>
									</li>
								</div>
								<div class="mui-col-sm-3 mui-col-xs-3 mui-single">
									<li class="mui-table-view-cell price">
										<span class="{%=data[i].code%}price">{%=data[i].price%}</span>
									</li>
								</div>
								<div class="mui-col-sm-3 mui-col-xs-3 mui-single">
									{%if(Number(data[i].changeRate)<0){%}
									<li class="mui-table-view-cell percent lowpercent {%=data[i].code%}rate">{%=data[i].changeRate%}%</li>
									{%}else if(Number(data[i].changeRate)>0){%}
									<li class="mui-table-view-cell percent highpercent {%=data[i].code%}rate">{%=data[i].changeRate%}%</li>
									{%}else{%}
									<li class="mui-table-view-cell percent equalpercent {%=data[i].code%}rate">{%=data[i].changeRate%}%</li>
									{%}%}
								</div>
							</div>
							{%}%}
						</script>
					</div>
				</div>
			</div>
		</div>
		<!--tabBar-->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" data-page='marketPage' href="#">
				<img src="images/HQ_icon_select_21x21_@3x.png" alt="" />
				<span class="activeBar">行情</span>
			</a>
			<a class="mui-tab-item mui-active" data-page='optionalPage' href="#">
				<img src="images/ZX_icon_21x21_@3x.png" alt="" />
				<span>自选</span>
			</a>
			<a class="mui-tab-item " data-page='newsPage' href="#">
				<img src="images/news.png" alt="" />
				<span>资讯</span>
			</a>
			<a class="mui-tab-item " data-page='tradePage' href="#">
				<img src="images/JY_icon_21x21_@2x.png" alt="" />
				<span>交易</span>
			</a>
			<a href="javascript:void(0)" class="mui-tab-item" data-page='centerPage'>
				<img src="images/WD_icon_21x21_@3x.png" alt="" />
				<span>我的</span>
			</a>
		</nav>
		<script src="js/mui.min.js"></script>
		<script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
		<script src='libs/easymob-webim-sdk/jquery-1.11.1.js'></script>
		<script src='js/config.js'></script>
		<script src='js/temp.js'></script>
		<script src='js/mstock.js'></script>
		<script type="text/javascript"> 
			mui.init();
			mui.back = function() {
				var _self = plus.webview.currentWebview();
				_self.close("auto");
			}
			mui('.mui-scroll-wrapper').scroll({
				scrollY: true, //是否竖向滚动
				scrollX: false, //是否横向滚动
				startX: 0, //初始化时滚动至x
				startY: 0, //初始化时滚动至y
				indicators: false, //是否显示滚动条
				deceleration: 0.0005, //阻尼系数,系数越小滑动越灵敏
				bounce: true //是否启用回弹
			});
			mstcok().stockList('hk');
			mui('.stockTab').on('tap','p',function(e){
				var ths = jQuery(this);
				var stockType = ths.attr('data-type'); 
				if(!ths.hasClass('stockActive')){
					websocket.close();
					mstcok().stockList(stockType);
					maskShowEvent()
				}
			})
			mstcok().tabBarFun('market');
		</script>
	</body>
</html>